<template>
    <div class="page page-login">
        <flexbox orient="vertical" 
                 justify="space-around" 
                 class="login-form">
            <flexbox-item :span="1">
                <img src="../assets/logo_1.png" class="img-logo">
            </flexbox-item>
            <flexbox-item :span="4">
                <group>
                    <x-input placeholder="请输入账号">
                        <o-icon name="person" 
                                slot="label" 
                                style="padding-right:10px;" 
                                :size="20"
                                ></o-icon>
                    </x-input>
                    <x-input type="password" placeholder="请输入密码">
                        <o-icon name="locked" 
                                slot="label" 
                                style="padding-right:10px;" 
                                :size="20"
                                ></o-icon>               
                    </x-input>
                </group>
            </flexbox-item>
            <flexbox-item :span="2">
                <div class="button-group set-margin">
                    <x-button type="primary" link="/index">
                        登录
                    </x-button>
                    <x-button mini link="/register">
                        没有账号？注册一个
                    </x-button>
                    <x-button mini>
                        忘记密码
                    </x-button>
                </div>
            </flexbox-item>
        </flexbox>
    </div>
</template>

<script>

export default {
    name: 'login',
}

</script>

<style lang="less" scoped>
    .page-login{
        height: inherit;
        justify-content: space-around;
        .img-logo{
            display: block;
            width: 60%;
            margin: 50px auto 0 auto;
        }
        .login-form{
            height: inherit;
            a{
                width: 100%;
                text-align: center;
            }
        }
    }
</style>
